layui.define(['jquery','jqui','cropper'], function(exports) {
	var $ = layui.$,
		jqui = layui.jqui,
		cropper = layui.cropper;

		var console = window.console || {
			log: function() {}
		};
		var URL = window.URL || window.webkitURL;
		var $image = $('#image');
		var $download = $('#download');
		var $dataX = $('#dataX');
		var $dataY = $('#dataY');
		var $dataHeight = $('#dataHeight');
		var $dataWidth = $('#dataWidth');
		var $dataRotate = $('#dataRotate');
		var $dataScaleX = $('#dataScaleX');
		var $dataScaleY = $('#dataScaleY');
		var options = {
			aspectRatio: 16 / 9,
			preview: '.img-preview',
			crop: function(e) {
				$dataX.val(Math.round(e.detail.x));
				$dataY.val(Math.round(e.detail.y));
				$dataHeight.val(Math.round(e.detail.height));
				$dataWidth.val(Math.round(e.detail.width));
				$dataRotate.val(e.detail.rotate);
				$dataScaleX.val(e.detail.scaleX);
				$dataScaleY.val(e.detail.scaleY);
			}
		};
		var originalImageURL = $image.attr('src');
		var uploadedImageName = 'cropped.jpg';
		var uploadedImageType = 'image/jpeg';
		var uploadedImageURL;

		// Tooltip
		$('[data-toggle="tooltip"]').tooltip();

		// Cropper
		$image.on({
			ready: function(e) {
				// console.log(e.type);
			},
			cropstart: function(e) {
				// console.log(e.type, e.detail.action);
			},
			cropmove: function(e) {
				// console.log(e.type, e.detail.action);
			},
			cropend: function(e) {
				// console.log(e.type, e.detail.action);
			},
			crop: function(e) {
				// console.log(e.type);
			},
			zoom: function(e) {
				// console.log(e.type, e.detail.ratio);
			}
		}).cropper(options);

		// Buttons
		if (!$.isFunction(document.createElement('canvas').getContext)) {
			$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
		}

		if (typeof document.createElement('cropper').style.transition === 'undefined') {
			$('button[data-method="rotate"]').prop('disabled', true);
			$('button[data-method="scale"]').prop('disabled', true);
		}

		// Download
		if (typeof $download[0].download === 'undefined') {
			$download.addClass('disabled');
		}

		// Options
		$('.docs-toggles').on('change', 'input', function() {
			var $this = $(this);
			var name = $this.attr('name');
			var type = $this.prop('type');
			var cropBoxData;
			var canvasData;

			if (!$image.data('cropper')) {
				return;
			}

			if (type === 'checkbox') {
				options[name] = $this.prop('checked');
				cropBoxData = $image.cropper('getCropBoxData');
				canvasData = $image.cropper('getCanvasData');

				options.ready = function() {
					$image.cropper('setCropBoxData', cropBoxData);
					$image.cropper('setCanvasData', canvasData);
				};
			} else if (type === 'radio') {
				options[name] = $this.val();
			}

			$image.cropper('destroy').cropper(options);
		});

		// Methods
		$('.docs-buttons').on('click', '[data-method]', function() {
			var $this = $(this);
			var data = $this.data();
			var cropper = $image.data('cropper');
			var cropped;
			var $target;
			var result;

			if ($this.prop('disabled') || $this.hasClass('disabled')) {
				return;
			}

			if (cropper && data.method) {
				data = $.extend({}, data); // Clone a new one

				if (typeof data.target !== 'undefined') {
					$target = $(data.target);

					if (typeof data.option === 'undefined') {
						try {
							data.option = JSON.parse($target.val());
						} catch (e) {
							console.log(e.message);
						}
					}
				}

				cropped = cropper.cropped;

				switch (data.method) {
					case 'rotate':
						if (cropped && options.viewMode > 0) {
							$image.cropper('clear');
						}

						break;

					case 'getCroppedCanvas':
						if (uploadedImageType === 'image/jpeg') {
							if (!data.option) {
								data.option = {};
							}

							data.option.fillColor = '#fff';
						}

						break;
				}

				result = $image.cropper(data.method, data.option, data.secondOption);

				switch (data.method) {
					case 'rotate':
						if (cropped && options.viewMode > 0) {
							$image.cropper('crop');
						}

						break;

					case 'scaleX':
					case 'scaleY':
						$(this).data('option', -data.option);
						break;

					case 'getCroppedCanvas':
						if (result) {
							// Bootstrap's Modal
							$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);

							if (!$download.hasClass('disabled')) {
								download.download = uploadedImageName;
								$download.attr('href', result.toDataURL(uploadedImageType));
							}
						}

						break;

					case 'destroy':
						if (uploadedImageURL) {
							URL.revokeObjectURL(uploadedImageURL);
							uploadedImageURL = '';
							$image.attr('src', originalImageURL);
						}

						break;
				}

				if ($.isPlainObject(result) && $target) {
					try {
						$target.val(JSON.stringify(result));
					} catch (e) {
						console.log(e.message);
					}
				}
			}
		});

		// Keyboard
		$(document.body).on('keydown', function(e) {
			if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) {
				return;
			}

			switch (e.which) {
				case 37:
					e.preventDefault();
					$image.cropper('move', -1, 0);
					break;

				case 38:
					e.preventDefault();
					$image.cropper('move', 0, -1);
					break;

				case 39:
					e.preventDefault();
					$image.cropper('move', 1, 0);
					break;

				case 40:
					e.preventDefault();
					$image.cropper('move', 0, 1);
					break;
			}
		});

		// Import image
		var $inputImage = $('#inputImage');

		if (URL) {
			$inputImage.change(function() {
				var files = this.files;
				var file;

				if (!$image.data('cropper')) {
					return;
				}

				if (files && files.length) {
					file = files[0];

					if (/^image\/\w+$/.test(file.type)) {
						uploadedImageName = file.name;
						uploadedImageType = file.type;

						if (uploadedImageURL) {
							URL.revokeObjectURL(uploadedImageURL);
						}

						uploadedImageURL = URL.createObjectURL(file);
						$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
						$inputImage.val('');
					} else {
						window.alert('Please choose an image file.');
					}
				}
			});
		} else {
			$inputImage.prop('disabled', true).parent().addClass('disabled');
		}

	exports('cropperdemo', {});
});